<script setup>
import { ref, onMounted, computed } from 'vue';
import * as admin from '@/api/indexdata.js';
import { useRouter } from 'vue-router';

const router = useRouter();

// 景点列表数据
const jinquList = ref([]);

const total = ref(0);

// 当前页码
const currentPage = ref(1);

// 每页显示的数量
const pageSize = 5;

// 获取景区列表数据
const finjinqu = async () => {
  const params = { currentPage: currentPage.value };
  const res = await admin.articleJinquListService(params);
  console.log(res);
  total.value = res.total
  jinquList.value = res.data || [];  // 确保赋值是数组
};

// 计算当前页的数据
const currentPageData = computed(() => {
  if (Array.isArray(jinquList.value) && jinquList.value.length > 0) {
    const start = (currentPage.value - 1) * pageSize;
    const end = currentPage.value * pageSize;
    return jinquList.value.slice(start, end);
  }
  return [];
});

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 分页切换时触发的函数
const handlePageChange = (page) => {
  currentPage.value = page;
  console.log('当前页码：', page);
  finjinqu();
};

const goToJinquData = (id) => {
  router.push({path:'/indexJinquData',query:{jinquId:id}});
};


const goToJindianList = (id) => {
  console.log('id====',id);
  router.push({path:'/indexJindianList',query:{jinquId:id}});
};

// 页面加载完成后获取数据
onMounted(() => {
  finjinqu();
});
</script>

<template>
  <el-main>
    <!-- 景点列表 -->
    <el-row :gutter="20" justify="center">
      <el-col :span="16" v-for="(item, index) in jinquList" :key="item.id">
        <el-card :body-style="{ padding: '20px' }">
          <div>
            <el-image
            v-if="item.img"
            :src="item.img"
            alt="景点图片"
            fit="cover"
            style="width: 100%; height: 200px; border-radius: 8px;"></el-image>
            <!-- <el-image v-else -->
            <!-- :src="'/path/to/default-image.jpg'" 默认图片路径 -->
            <!-- alt="默认景点图片" -->
            <!-- fit="cover" -->
            <!-- style="width: 100%; height: 200px; border-radius: 8px;"> -->
            <!-- </el-image> -->
            
            <h3>{{ item.name }}</h3>
            <p>{{ item.content }}</p>
            <p><strong>地址：</strong>{{ item.address }}</p>
            <p><strong>开放时间：</strong>{{ item.openTime }}</p>
            <p><strong>票价：</strong>{{ item.price }}</p>
            <p><strong>昵称：</strong>{{ item.nickName || '暂无' }}</p>
            <p><strong>创建时间：</strong>{{ formatDate(item.createTime) }}</p>
            <p>
              <el-button type="primary" @click="goToJinquData(item.id)">预约购票</el-button>
              <el-button type="success" @click="goToJindianList(item.id)">查看景点</el-button>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <div style="display: flex; justify-content: center; margin-top: 20px;">
    <el-pagination 
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      layout="prev, pager, next, jumper"
    ></el-pagination>
    </div>
  </el-main>
</template>

<style scoped>
.el-container {
  height: 100vh;
}

.el-header {
  background-color: #409eff;
  color: white;
  text-align: center;
  padding: 10px;
}

.el-main {
  padding: 20px;
}

.el-footer {
  text-align: center;
  background-color: #f4f4f4;
  padding: 10px;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-card h3 {
  font-size: 20px;
  color: #409eff;
}

.el-card p {
  font-size: 14px;
  color: #666;
}
</style>
